@use "../../assets/scss/mixins/base" as *;

$bobs: 16;
$rod-length: 80px;
$bob-diameter: 32px;

body {
  background: #fa0;
  animation: 40s infinite background-color-change;
}

.pendulum {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc($bob-diameter / -2);
  width: $bob-diameter;
  text-align: center;
  transform-origin: 50% 0;
  will-change: transform;
  animation: 1s ease-in-out infinite pendulum-swing;
  &::before,
  &::after {
    content: "";
    display: block;
  }
  &::before {
    margin: 0 auto;
    width: 1px;
    height: $rod-length;
    background: rgba(#fff, 0.6);
  }
  &::after {
    @include circle($bob-diameter, #fa0);
    background: radial-gradient(circle at 10px 10px, #fff, #555);
    box-shadow: inset -3px -3px 3px rgba(#444, 0.3);
  }

  @for $i from 0 through $bobs {
    &:nth-of-type(#{$i}) {
      z-index: $bobs - $i;
      animation-delay: calc(2s * (20 / (30 - $i)));

      &::before {
        height: $rod-length + ($bob-diameter - 10) * $i;
      }
    }
  }
}

@keyframes pendulum-swing {
  0% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(25deg);
  }
}

@keyframes background-color-change {
  0% {
    background-color: #ff5722;
  }
  7% {
    background-color: #e91e63;
  }
  14% {
    background-color: #9c27b0;
  }
  21% {
    background-color: #673ab7;
  }
  28% {
    background-color: #3f51b5;
  }
  35% {
    background-color: #2196f3;
  }
  42% {
    background-color: #03a9f4;
  }
  49% {
    background-color: #00bcd4;
  }
  56% {
    background-color: #009688;
  }
  63% {
    background-color: #4caf50;
  }
  70% {
    background-color: #8bc34a;
  }
  77% {
    background-color: #cddc39;
  }
  84% {
    background-color: #ffc107;
  }
  91% {
    background-color: #ff9800;
  }
  100% {
    background-color: #ff5722;
  }
}
